<div class="importance-transfer-page">
  <div class="container-fluid main">

    <div class="row">
      <div class="col-sm-10">
        <h2>{{ 'IMPORTANCE_TRANSFER_TITLE' | translate }}</h2>
      </div>
    </div>

    <div class="row">

      <div class="col-md-6 col-sm-12">
        <div class="panel-heading">
          <h3>{{ 'IMPORTANCE_TRANSFER_NAME' | translate }}</h3>
        </div>
        <div class="panel-body">
          <fieldset>
            <!-- REMOTE ACCOUNT -->
            <fieldset class="form-group" ng-show="!$ctrl.customKey">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'IMPORTANCE_TRANSFER_REMOTE_ACCOUNT' | translate }}: </label>
                </span>
                <input type="text" class="form-control" ng-model="$ctrl.remoteAccountAddress" readOnly>
              </div>
            </fieldset>
            <!-- REMOTE ACCOUNT CUSTOM KEY-->
            <fieldset class="form-group" ng-show="$ctrl.customKey">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'IMPORTANCE_TRANSFER_REMOTE_PUBLIC' | translate }}: </label>
                </span>
                <input type="text" class="form-control" ng-model="$ctrl.formData.remoteAccount" placeholder="0257b05f601ff829fdff84956fb5e3c65470a62375a1cc285779edd5ca3b42f6" ng-change="$ctrl.generateAddress();">
              </div>
            </fieldset>
            <!-- GENERATED REMOTE ACCOUNT -->
            <fieldset class="form-group" ng-show="$ctrl.customKey && $ctrl.generatedRemoteAccount.length">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'IMPORTANCE_TRANSFER_REMOTE_ACCOUNT' | translate }}: </label>
                </span>
                <input type="text" class="form-control" ng-model="$ctrl.generatedRemoteAccount" readOnly>
              </div>
            </fieldset>
            <!-- CHECKBOX TO ALLOW ENTERING OF PUBLIC KEY -->
            <div class="row checkboxes">
              <div class="col-sm-8">
                <fieldset class="form-group">
                  <input id="box5" type="checkbox" ng-model="$ctrl.customKey" ng-change="$ctrl.updateRemoteAccount()">
                  <label for="box5">{{ 'IMPORTANCE_TRANSFER_CUSTOM_KEY' | translate }}</label>
                </fieldset>
              </div>
            </div>
            <!-- ACTIVATE OR DEACTIVATE DELEGATED HARVESTING -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'IMPORTANCE_TRANSFER_MODE_SELECT' | translate }}: </label>
                </span>
                <select class="form-control" ng-options="mode.key as mode.name for mode in $ctrl.modes" ng-model="$ctrl.formData.mode">
                  <option value="" disabled>{{ 'IMPORTANCE_TRANSFER_MODE_SELECT' | translate }}</option>
                </select>
              </div>
            </fieldset>
            <!-- TRANSACTION FEES -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{'FORM_SIDE_BTN_TX_FEE' | translate}}: </label>
                </span>
                <div class="form-control formFloat" readOnly>
                  <span class="feeAmount">
                    <span>{{($ctrl.formData.fee | fmtNemValue)[0]}}.{{($ctrl.formData.fee | fmtNemValue)[1]}}</span>
                  </span>
                  <label class="floatRight"><small>XEM</small></label>
                </div>
              </div>
            </fieldset>
            <!-- PASSWORD FIELD -->
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label ng-class="!$ctrl.common.password.length ? 'has-error' : ''">{{ 'FORM_PASSWORD' | translate }}:</label>
                </span>
                <input class="form-control form-control-lg" type="password" placeholder="{{ 'FORM_PASSWORD_FIELD_PLACEHOLDER' | translate }}" ng-model="$ctrl.common.password" ng-class="!$ctrl.common.password.length ? 'has-error' : ''"/>
              </div>
            </fieldset>
            <!-- SEND FIELD -->
            <button class="btn btn-success pull-xs-right"
              type="submit" ng-disabled="$ctrl.okPressed || !$ctrl.common.password.length || $ctrl.formData.remoteAccount.length !== 64" ng-click="$ctrl.send()">
              <i class="fa fa-send"></i> {{ 'GENERAL_SEND' | translate }}
            </button>
          </fieldset>
        </div>
      </div>

      <div class="col-md-6 col-sm-12">
        <div class="panel-heading">
          <h3>{{ 'IMPORTANCE_TRANSFER_HARVESTING_PANEL' | translate }}</h3>
        </div>
        <!-- <div class="panel-heading">
          <span ng-show="!$ctrl.showInfo"><i class="fa fa-cubes"></i> {{ 'IMPORTANCE_TRANSFER_HARVESTING_PANEL' | translate }}</span>
            <span ng-show="$ctrl.showInfo"><i class="fa fa-info-circle"></i> {{ 'GENERAL_INFORMATION' | translate }}</span>
            <ul class="nav nav-tabs" style="float:right">
              <li ng-class="!$ctrl.showInfo ? 'active' : ''"><a style="outline:0;cursor:pointer;display:inline;" ng-click="$ctrl.showInfo = false;"><i class="fa fa-cloud"></i></a></li>
              <li ng-class="$ctrl.showInfo ? 'active' : ''"><a style="outline:0;cursor:pointer;display:inline;" ng-click="$ctrl.showInfo = true;"><i class="fa fa-info-circle"></i></a></li> -->
        <!-- <div class="panel-body" ng-show="$ctrl.showInfo">
          <p>{{ 'IMPORTANCE_TRANSFER_INFO_PART_1' | translate }}#
            <br><br>
          {{ 'IMPORTANCE_TRANSFER_INFO_PART_2' | translate }}%</p>
        </div> -->
        <div class="panel-body" ng-show="!$ctrl.showInfo">
          <div class="row">
          <div class="col-md-3">
            <h5>{{ 'ACCOUNT_REMOTE_STATUS' | translate }}</h5>
             <span ng-show="$ctrl._DataBridge.accountData.meta.remoteStatus === 'ACTIVE'" style="text-transform: uppercase;color: green;">{{ 'GENERAL_ACTIVE' | translate }}</span>
            <span ng-show="$ctrl._DataBridge.accountData.meta.remoteStatus === 'INACTIVE'" style="text-transform: uppercase;color: red;">{{ 'GENERAL_INACTIVE' | translate }}</span>
            <span ng-show="$ctrl._DataBridge.accountData.meta.remoteStatus === 'ACTIVATING'" style="text-transform: uppercase;">{{ 'GENERAL_ACTIVATING' | translate }}</span>
            <span ng-show="$ctrl._DataBridge.accountData.meta.remoteStatus === 'DEACTIVATING'" style="text-transform: uppercase;">{{ 'GENERAL_DEACTIVATING' | translate }}</span>
            <span  ng-show="$ctrl._DataBridge.accountData.meta.remoteStatus === 'REMOTE'" style="text-transform: uppercase;">{{ 'GENERAL_REMOTE' | translate }}</span>
          </div>
          <div class="col-md-3">
            <h5>{{ 'IMPORTANCE_TRANSFER_HARVESTING_STATUS' | translate }}</h5>
            <span ng-show="$ctrl.delegatedData.meta.status === 'UNLOCKED'" style="text-transform: uppercase;color: green;">{{ 'GENERAL_ACTIVE' | translate }}</span>
            <span ng-show="$ctrl.delegatedData.meta.status === 'LOCKED'" style="text-transform: uppercase;color: red;">{{ 'GENERAL_INACTIVE' | translate }}</span>
          </div>
          <div class="col-md-3">
            <h5>{{ 'ACCOUNT_VESTED_BALANCE' | translate }}</h5>
            <span>{{ ($ctrl._DataBridge.accountData.account.vestedBalance | fmtNemValue)[0] }}.{{ ($ctrl._DataBridge.accountData.account.vestedBalance | fmtNemValue)[1] }} <small><b>XEM</b></small></span>
          </div>
          <div class="col-md-3">
            <h5>{{ 'ACCOUNT_HARVESTED_BLOCKS' | translate }}</h5>
            <span>
              <span ng-show="$ctrl._DataBridge.accountData.account.harvestedBlocks === 0">{{ 'IMPORTANCE_TRANSFER_NO_BLOCKS_HARVESTED' | translate }}</span>
              <span ng-show="$ctrl._DataBridge.accountData.account.harvestedBlocks > 0">{{ $ctrl._DataBridge.accountData.account.harvestedBlocks }}</span>
            </span>
          </div>
        </div>
        <br>
        <div class="panel-heading">
          <h3>{{ 'IMPORTANCE_TRANSFER_DELEGATED_KEYS' | translate }}</h3>
        </div>
        <div class="panel-body">
        <!-- DELEGATED PUBLIC KEY -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{ 'ACCOUNT_DELEGATED_PUBLIC' | translate }}: </label>
              </span>
              <input type="text" class="form-control" ng-model="$ctrl._Wallet.currentAccount.child" readOnly>
            </div>
          </fieldset>
          <!-- DELEGATED PRIVATE KEY -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn short">
                <label ng-show="!$ctrl.commonDelegated.delegatedPrivateKey.length">{{ 'FORM_PASSWORD' | translate }}:</label>
                <label ng-show="$ctrl.commonDelegated.delegatedPrivateKey.length">{{ 'ACCOUNT_DELEGATED_PRIVATE_KEY' | translate }}</label>
              </span>
              <input class="form-control" type="password" ng-model="$ctrl.commonDelegated.password" placeholder="{{ 'IMPORTANCE_TRANSFER_PRIVATE_KEY_PLACEHOLDER' | translate }}" ng-show="!$ctrl.commonDelegated.delegatedPrivateKey"/>
              <input class="form-control" ng-show="$ctrl.commonDelegated.delegatedPrivateKey" ng-model="$ctrl.commonDelegated.delegatedPrivateKey" readOnly></input>
              <span class="input-group-btn showHide">
                <button class="btn btn-primary" type="button" ng-show="!$ctrl.commonDelegated.delegatedPrivateKey.length" ng-click="$ctrl.revealDelegatedPrivateKey()" title="{{ 'ACCOUNT_PRIVATE_KEY_SHOW' | translate }}">
                  <i class="fa fa-plus"></i>
                </button>
                <button class="btn btn-danger" type="button" ng-show="$ctrl.commonDelegated.delegatedPrivateKey.length" ng-click="$ctrl.clearSensitiveData()" title="{{ 'GENERAL_CLEAR_ALL' | translate }}">
                  <i class="fa fa-minus"></i>
                </button>
              </span>
            </div>
          </fieldset>
        </div>

        <!-- START/STOP HARVESTING -->
        <div class="panel-heading">
          <h3>{{ 'ACCOUNT_START_STOP_HARVESTING' | translate }}</h3>
        </div>

        <div class="panel-body" ng-show="$ctrl._DataBridge.accountData.meta.remoteStatus === 'ACTIVE'">

        <p class="bg-info" ng-show="$ctrl._DataBridge.accountData.account.vestedBalance / 1000000 > 10000">
            <span ng-bind-html="'ACCOUNT_HARVESTING_NOTE' | translate"></span>
        </p>

        <div class="form-group" ng-show="$ctrl._DataBridge.accountData.account.vestedBalance / 1000000 > 10000">

          <div class="form-group">
            <fieldset>
              <input type="password" class="form-control" ng-model="$ctrl.commonHarvesting.password" placeholder="{{'FORM_PASSWORD_FIELD_PLACEHOLDER' | translate }}" ng-class="!$ctrl.commonHarvesting.password.length ? 'has-error' : ''"></input>
            </fieldset>
          </div>

          <div class="input-group">
          <input class="form-control" type="text" ng-model="$ctrl.harvestingNode" ng-style="!$ctrl.customHarvestingNode ? {'display': 'none'} : ''" ng-model-options="{ debounce: 500 }" ng-disabled="$ctrl.delegatedData.meta.status === 'UNLOCKED'" ng-change="$ctrl.checkNode();$ctrl.updateDelegatedData();"/>
          <select class="form-control" style="width:100%;" ng-model="$ctrl.harvestingNode" ng-options="(node.uri | toHostname) as (node.uri | toHostname) for node in $ctrl.nodes" ng-style="$ctrl.customHarvestingNode ? {'display': 'none'} : $ctrl.showSupernodes ? {'display': 'none'} : ''" ng-disabled="$ctrl.delegatedData.meta.status === 'UNLOCKED'" ng-change="$ctrl.checkNode();$ctrl.updateDelegatedData();"><option value="" disabled selected>{{ 'ACCOUNT_HARVESTING_NODE_SELECT' | translate }}</option></select>
           <select class="form-control" style="width:100%;" ng-model="$ctrl.harvestingNode" ng-options="node.ip as node.ip for node in $ctrl.nodes" ng-style="$ctrl.customHarvestingNode ? {'display': 'none'} : !$ctrl.showSupernodes ? {'display': 'none'} : ''" ng-disabled="$ctrl.delegatedData.meta.status === 'UNLOCKED'" ng-change="$ctrl.checkNode();$ctrl.updateDelegatedData();"><option value="" disabled selected>{{ 'ACCOUNT_HARVESTING_NODE_SELECT' | translate }}</option></select>
            <span class="input-group-btn">
              <button ng-class="!$ctrl.customHarvestingNode ? 'active' : ''" class="btn btn-primary" type="button" ng-click="$ctrl.customHarvestingNode = false;" title="{{ 'ACCOUNT_NODE_FROM_LIST' | translate}}"><i class="fa fa-cloud"></i></button>
              <button ng-class="$ctrl.customHarvestingNode ? 'active' : ''" class="btn btn-primary" type="button" ng-click="$ctrl.customHarvestingNode = true;" title="{{'ACCOUNT_CUSTOM_NODE' | translate}}"><i class="fa fa-edit"></i></button>
            </span>
          </div>
          <button class="btn btn-success" type="button" ng-show="$ctrl.delegatedData.meta.status === 'LOCKED'" ng-disabled="$ctrl.noFreeSlots || !$ctrl.commonHarvesting.password.length" ng-click="$ctrl.startDelegatedHarvesting()" title="{{'ACCOUNT_HARVESTING_START' | translate}}" style="margin-top: 10px;width: 100%;"><i class="fa fa-play-circle-o"></i> {{ 'IMPORTANCE_TRANSFER_START_HARVESTING' | translate }}</button>
          <button class="btn btn-danger" type="button" ng-show="$ctrl.delegatedData.meta.status === 'UNLOCKED'" ng-click="$ctrl.stopDelegatedHarvesting()" title="{{'ACCOUNT_HARVESTING_STOP' | translate}}" ng-disabled="!$ctrl.commonHarvesting.password.length" style="margin-top: 10px;width: 100%;"><i class="fa fa-stop-circle-o"></i> {{ 'IMPORTANCE_TRANSFER_STOP_HARVESTING' | translate }}</button>
        </div>

        <p class="bg-info text-center" ng-show="$ctrl.noFreeSlots && $ctrl.delegatedData.meta.status === 'LOCKED' && $ctrl._DataBridge.accountData.account.vestedBalance / 1000000 > 10000"><i class="fa fa-exclamation-triangle "></i> {{ 'ACCOUNT_HARVESTING_NO_SLOTS' | translate }}</p>
        <p class="bg-info" ng-show="$ctrl._DataBridge.accountData.account.vestedBalance / 1000000 < 10000"><i class="fa fa-exclamation-triangle "></i> {{ 'ACCOUNT_HARVESTING_BELOW_THRESHOLD' | translate }}</p>
      </div>
      <div class="panel-body" ng-show="$ctrl._DataBridge.accountData.meta.remoteStatus === 'ACTIVATING'">
        <p class="bg-info"><i class="fa fa-exclamation-triangle "></i> {{ 'IMPORTANCE_TRANSFER_REMOTE_ACTIVATING' | translate }}</p>
      </div>
      <div class="panel-body" ng-show="$ctrl._DataBridge.accountData.meta.remoteStatus === 'INACTIVE'">
        <p class="bg-info"><i class="fa fa-exclamation-triangle "></i> {{ 'IMPORTANCE_TRANSFER_REMOTE_INACTIVE' | translate }}</p>
      </div>
      </div>

    </div>

  </div>

</div>
